<template>
	<view class="club bg">
		<view>
			<swiper class="swiper" circular autoplay style='height: 340rpx'>
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="item.image" mode="aspectFill" class="bannerImg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="plr-30">
			<view class="pt-40 pb-40 size-36 f-bold white">创作者俱乐部</view>
			<view class="flex flex-wrap" style='align-items: normal;'>
				<view @click="toUser(item.id)" v-for="(item,index) in list" :key="index" class="radius-20 mb-20" style="background: #fff;width: 330rpx;">
					<image :src="item.image_b" mode="aspectFill" style="height: 230rpx;border-radius: 20rpx 20rpx 0 0;"></image>
					<view class="relative pt-62 pl-20 pr-20 pb-25" style="background: #fff;border-radius:0 0 20rpx 20rpx;">
						<image :src="item.image" mode="aspectFill" class="userImg"></image>
						<view class="white size-30 f-bold text-center">{{ item.name }}</view>
						<view class="size-24 color-9 mt-25 txt">{{ item.desc }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,//页数
				pages:1,//总页数
				list:[],//列表
				bannerList: [],
			};
		},
		methods:{
			//获取轮播图
			getBannerList () {
				this.$http('api/index/bannerList').then(res => {
				  this.bannerList = res
				})
			},
			toUser (id) {
				uni.navigateTo({
					url:`/pages/home/framer?id=${id}`
				})
			},
			getchuangZuo () {
				this.$http('api/Newapi/chuangZuo',{page:this.page}).then(res=>{
					this.list = this.page == 1 ? res.data : [...this.list,...res.data]
					this.pages = res.last_page
				})
			}
		},
		onLoad() {
			this.getchuangZuo()
			this.getBannerList()
		}
	}
</script>
<style>
	page {
		background: #0A0B20;
	}
</style>
<style lang="scss" scoped>
page{
	background-color: #f5f5f5;
}
.white{
	color: #3c3c3c;
}
image {
	width: 100%;
	height: 100%;
	display: block;
}
.userImg {
	width: 72rpx;
	height: 72rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -36rpx;
	border-radius: 50%;
}
.txt {
	overflow:hidden;
	// verflow:hidden; /*超出的部分隐藏起来。*/
	// text-overflow:ellipsis;/* 支持 IE */
	display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
	-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
	-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
}
</style>
